import {Component, OnInit} from '@angular/core';
import {Hero} from '../../service/domain/Hero';
import {HeroService} from '../../service/heroService/hero-service.service';
import {MessagesService} from '../../service/messages/messages.service';

@Component({
  selector: 'app-heros',
  templateUrl: './heros.component.html',
  styleUrls: ['./heros.component.css']
})
export class HerosComponent implements OnInit {

  /*通过注入的方式，调用其中的API获取值，*/
  heroes: Hero[];
  /*  public selectedHero: Hero;*/

  /*这个参数同时做了两件事：1. 声明了一个私有 heroService 属性，2. 把它标记为一个 HeroService 的注入点。*/
  /*当 Angular 创建 HeroesComponent 时，依赖注入系统就会把这个 heroService 参数设置为 HeroService 的单例对象。*/

  /*构造函数把heroService设置为属性值*/
  constructor(private heroService: HeroService, private msg: MessagesService) {
  }

  /*
    在ngOnInit 中调用它
    你固然可以在构造函数中调用 getHeroes()，但那不是最佳实践。
    让构造函数保持简单，只做初始化操作，比如把构造函数的参数赋值给属性。 构造函数不应该做任何事。
    它肯定不能调用某个函数来向远端服务（比如真实的数据服务）发起 HTTP 请求。
    而是选择在 ngOnInit 生命周期钩子中调用 getHeroes()，之后交由 Angular 处理，它会在构造
    出 HeroesComponent 的实例之后的某个合适的时机调用 ngOnInit。
  */
  ngOnInit() {
    this.getHeroes();
    /*this.getHeroesClient();*/
  }

  delete(hero: Hero): void {
    this.heroes = this.heroes.filter(h => h !== hero);
    this.heroService.deleteHero(hero).subscribe();
  }

  /*onSelect(selectedHero: Hero): void {
    this.msg.add(`Hero'Name${selectedHero.name} is ${selectedHero.id} number !`)
    this.selectedHero = selectedHero;
  }

  public getValues(message: string): string {
    let index: string[] = message.split('--');
    return `skill's name :${index[0]}  \n
              skill's description :${index[1]}`;
  }*/

  /*
    可观察对象版本的 HeroService
    Observable 是 RxJS 库中的一个关键类。
    在稍后的 HTTP 教程中，你就会知道 Angular HttpClient 的方法会返回 RxJS 的 Observable。 这节课，你将使用 RxJS 的 of() 函数来模拟从服务器返回数据。
    打开 HeroService 文件，并从 RxJS 中导入 Observable 和 of 符号。
  */
  getHeroes(): void {
    this.heroService.getHeroes().subscribe(heroes => {
      this.heroes = heroes;
    });
  }

  add(name: string): void {
    name = name.trim();
    if (!name) {
      return;
    }
    this.heroService.addHero({name} as Hero)
      .subscribe(hero => {
        this.heroes.push(hero);
      });
  }

  /* getHeroesClient(): void {
     this.heroService.getHeroesClient().subscribe(heroes => {
         for (let i = 0; i < heroes.length; i++) {
           let h: Hero = heroes[i];
           this.name[i] = h.name;
         }
       }
     );
   }*/

  /*public changHeroName(name: string) {
    this.hero.name = name;
  }*/

}
